map和forEach 是否改变原数组

发表于 | 分类于 |
字数统计: 559 字 | 阅读时长 ≈ 2 分钟

数组元素是基本类型，则都不会修改到原数组

数组元素是引用类型

  • 对元素属性值进行修改，原数组都会跟着改变（本质：没有修改原数组的地址）
  • 对元素进行修改，不会改变原数组（本质：修改了原数组的地址）

如果不希望改变到原数组，需要对操作数组进行深拷贝

map

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// ----- 数组元素为基础类型，直接修改：原数组不变----
const arr = [1, 'a']
const arr_map = arr.map(item => item = 5)
console.log(arr, arr_map)
// [1, 'a'] [5, 5]

// ----- 数组元素为引用类型，直接修改数组元素：原数组不变 -----
const arr1 = [{a: 1, b: 2}, {a: 2, b: 3}]
const arr1_map = arr1.map(item => {
  item = 5 
  return item
})
console.log(arr1, arr1_map)
// [{a: 1, b: 2}, {a: 2, b: 3}] 
// [5, 5]

// ----- 修改数组元素的某一个属性：原数组改变 -----
const arr2 = [{a: 1, b: 2}, {a: 2, b: 3}]
const arr2_map = arr2.map(item => {
  item.a = 5 
  return item
})
console.log(arr2, arr2_map)
// [{a: 5, b: 2}, {a: 5, b: 3}] 
// [{a: 5, b: 2}, {a: 5, b: 3}]

// ----- 上面的情况，不想改变原数组 ----
const arr3 = [{a: 1, b: 2}, {a: 2, b: 3}]
const arr3_map = arr3.map(item => ({
  ...item,
  b: 5
}))
console.log(arr3, arr3_map)
// [{a: 1, b: 2}, {a: 2, b: 3}] 
// [{a: 5, b: 2}, {a: 5, b: 3}]

forEach

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// ----- 数组元素为基础类型，直接修改：原数组不变----
const arr = [1, 'a']
arr.forEach(item => item = 5)
console.log(arr) // [1, 'a']


// ----- 数组元素为引用类型，直接修改数组元素：原数组不变 -----
const arr1 = [{a: 1, b: 2}, {a: 2, b: 3}]
arr1.forEach(item => {
  item = 5 
  return item
})
console.log(arr1) // [{a: 1, b: 2}, {a: 2, b: 3}]


// ----- 修改数组元素的某一个属性：原数组改变 -----
const arr2 = [{a: 1, b: 2}, {a: 2, b: 3}]
arr2.forEach(item => {
  item.a = 5 
  return item
})
console.log(arr2) // [{a: 5, b: 2}, {a: 5, b: 3}]

// ----- 上面的情况，不想改变原数组 ----
const arr3 = [{a: 1, b: 2}, {a: 2, b: 3}]
arr3.forEach(item => ({
  ...item,
  b: 5
}))
console.log(arr3)
// [{a: 1, b: 2}, {a: 2, b: 3}]